<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <!-- 下载 引入 -->
    <script src="../js/vue-router.js"></script>
    <style>
        html {
            /* 设置rem:  1rem=100px(设计图) */
            font-size: -webkit-calc(100vw/7.5);
        }

        body {
            font-size: 0.24rem;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #app .main {
            flex: 1;
            overflow-y: auto;
        }

        #app .footer {
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            display: flex;
            border-top: 1px solid #707070;
        }

        #app .footer a {
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="app">

        <!-- <component class="main" :is="compName"></component>
        <div class="footer">
            <a href="#/" >首页</a>
            <a href="#/list" >列表</a>
            <a href="#/car" >购物车</a>
            <a href="#/mine" >我的</a>
        </div> -->



        <!-- 
            Vue.use(VueRouter)   使用vue-router插件 之后Vue-router内置组件

            router-link  => 等价于a
            router-view  => 动态组件, 组件切换
         -->

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view class="main" ></router-view>
        <div class="footer">
            <!-- <a href="#/" >首页</a>
            <a href="#/list" >列表</a>
            <a href="#/car" >购物车</a>
            <a href="#/mine" >我的</a> -->

            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/list">列表</router-link>
            <router-link to="/car">购物车</router-link>
            <router-link to="/mine">我的</router-link>
        </div>
    </div>
</body>
<script>
    console.log(Vue);
    console.log(VueRouter);

    // 路由:
    // 后端路由(接口) -> 前端向对应的路由地址发送请求,服务端返回不同的结果
    // 页面路由(站点) -> 浏览器访问服务器站点中的文件(/day01/html/01.html) => 服务器从站点中找到该文件所在地址 读取之后 返回给浏览器


    // 单页面引用  => 所有的页面相关的组件都在根组件中挂载 => 公用一个页面, 在通过路径记录访问的地址

    // 前端路由:  对应不同的路由地址展示不同的页面
    // history

    // hash路由    -> 用hash值模拟路由/路径
    // 优点:
    // 1. 修改hash值不会触发页面刷新
    // 2. hash值不会随着请求传递给后端

    // 自己提前定义好
    // /  -> 首页
    // /list -> 列表页
    // /car  -> 购物车
    // /mine -> 我的

    // 模拟实现vue-router  

    // vue-router  Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌


    // 1.  在Vue中使用VueRouter插件    
    Vue.use(VueRouter)

    // 2. 定义组件  => 组件相关的配置
    let Home = {
        template: `<div class="home">
            主页的内容
        </div>`
    }

    let List = {
        template: `<div class="list">
            列表的内容
        </div>`
    }

    let Car = {
        template: `<div class="car">
            购物车的内容
        </div>`
    }

    let Mine = {
        template: `<div class="mine">
            我的内容
        </div>`
    }


    let NotFound = {
        template: `<div class="mine">
            404
        </div>`
    }

    //  3. 路由配置 => 将路由(自定义路径)和组件关联起来  => 
    //  每个路由应该映射一个组件。 其中"component" 可以是
    let routes = [{
        path: "/",
        name: "home",
        component: Home,
    }, {
        path: "/list",
        name: "list",
        component: List,
    }, {
        path: "/car",
        name: "car",
        component: Car,
    }, {
        path: "/mine",
        name: "mine",
        component: Mine,
    },{
        path: "/404",
        name: "not-found",
        component: NotFound,
    },{
        path: "*",  // 除了上述路径以外的所有其他路径  -> 渲染NotFound
        component: NotFound,
    }]

    // 4. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes:routes // (缩写) 相当于 routes: routes
    })


    //  5. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    var app = new Vue({
        el: "#app",
        data: {
            
        },
        router:router,  // 注册组件到根组件  将路由路径和组件进行关联
    })
</script>

</html>